<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		
		#root button {
			padding: 5px;
			margin: 5px;
		}
		
		#root button.active {
			background: red;
		}
		
		#root div {
			width: 500px;
			height: 300px;
			border: 1px solid green;
		}
	</style>
</head>
<body>
<div id="root">
	<button>中国</button>
	<button>日本</button>
	<button>韩国</button>
	<div>中国新闻</div>
	<div>日本新闻</div>
	<div>韩国新闻</div>
</div>
</body>
<script>
	// 1- 将面向过程中定义的变量或常量作为对象的实例属性
	// 2- 将面向过程中定义的函数作为对象的原型方法
	function Tag() {
		this.btns = document.querySelectorAll("button");
		this.divs = document.querySelectorAll("#root div");
		this.index = 0;// 选中下标
		this.init();
	}
	
	Object.assign(Tag.prototype, {
		init() {
			for (let i = 0; i < this.btns.length; i++) {
				this.hide(i);
				this.btns[i].onclick = ()=> {
					if (i === this.index) return;
					this.hide();
					this.index = i;
					this.show();
				}
			}
			this.show();
		},
		hide(i = this.index) {
			this.btns[i].className = null;
			this.divs[i].style.display = "none";
		},
		show() {
			this.btns[this.index].className = "active";
			this.divs[this.index].style.display = "block";
		}
	});
	new Tag();
	
	

</script>
</html>